import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';

const valueEnumMap = {
  0: 'running',
  1: 'online',
  2: 'error',
};

export type TableListItem = {
  key: number;
  status: string | number;
};
const tableListDataSource: TableListItem[] = [];

for (let i = 0; i < 20; i += 1) {
  tableListDataSource.push({
    key: i,
    status: valueEnumMap[Math.floor(Math.random() * 10) % 4],
  });
}

const valueEnum = {
  all: { text: '全部', status: 'Default' },
  running: { text: '今天', status: 'Processing' },
  online: { text: '昨天', status: 'Success' },
  error: { text: '最近七天', status: 'Error' },
  closed: { text: '本月', status: 'Error' },
  value: { text: '本年', status: 'Error' },
};

const columns: ProColumns<TableListItem>[] = [
  {
    title: '选择ID',
    key: 'select',
    search:false,
    valueType: 'select',
    dataIndex: 'status',
    width: 100,
  },
  {
    key: 'radioButton',
    title: '客服头像',
    dataIndex: 'status',
    valueType: 'radioButton',
    initialValue: 'all',
    width: 200,
    valueEnum,
  },
  {
    title:'自定义时间',
    dataIndex:'time',
    valueType: 'dateRange',
    hideInTable:false,
    hideInForm:false,

  },
  {
    title: '微信用户名称',
    key: 'radio',
    dataIndex: 'status',
    valueType: 'text',
    width: 100,
  },

  {
    key: 'status',
    title: '用户类型',
    dataIndex: 'status',
    search:false,
    initialValue: ['all'],
    width: 100,
    valueType: 'checkbox',
    valueEnum,
  },
  {
    key: 'status',
    title: '性别',
    dataIndex: 'status',
    search:false,
    initialValue: ['all'],
    width: 100,
    valueType: 'checkbox',
    valueEnum,
  },
  {
    key: 'status',
    title: '地区',
    search:false,
    dataIndex: 'status',
    initialValue: ['all'],
    width: 100,
    valueType: 'checkbox',
    valueEnum,
  },
  {
    key: 'status',
    title: '是否关注公众号',
    dataIndex: 'status',
    search:false,
    initialValue: ['all'],
    width: 100,
    valueType: 'checkbox',
    valueEnum,
  },
  {
    title: '操作',
    key: 'option',
    width: 120,
    valueType: 'option',
    render: (_, row, index, action) => [
      <a
        key="a"
        onClick={() => {
          action?.startEditable(row.key);
        }}
      >
        编辑
      </a>,
    ],
  },
];

const FormModal =() => (
  <>
    <ProTable<TableListItem>
      columns={columns}
      scroll={{x: 1200}}
      request={() => {
        return Promise.resolve({
          data: tableListDataSource,
          success: true,
        });
      }}
      search={{
        defaultCollapsed: false,
        span: 12,
        labelWidth: 'auto',
      }}
      pagination={{
        pageSize:20,
        total:100
      }}
      rowKey="key"
      headerTitle="样式类"
    />
  </>
);
export default FormModal;
